<template>
  <div class="login-bg">
    <div class="login-card">
      <div class="login-logo-row">
        <img src="@/assets/logo.png" alt="logo" class="login-logo" />
        <span class="login-title">LOL皮肤网站</span>
      </div>
      <div class="login-welcome">欢迎登录</div>
      <form @submit.prevent="login" class="login-form">
        <input type="text" placeholder="请输入账号" v-model="admin.name" autocomplete="username" />
        <input type="password" placeholder="请输入密码" v-model="admin.password" autocomplete="current-password" />
        <select v-model="admin.role">
          <option value="ROLE_ADMIN">管理员</option>
          <option value="ROLE_USER">用户</option>
        </select>
        <button class="login-btn" type="submit">登 录</button>
      </form>
      <div class="login-links">
        <span @click="$router.push('/register')">没有账号？立即注册</span>
        <span class="divider">|</span>
        <span @click="showTip = true">忘记密码？</span>
      </div>
      <transition name="fade">
        <div class="login-tip" v-if="showTip" @click="showTip = false">
          请联系管理员重置密码
        </div>
      </transition>
      <div class="login-footer">
        <span>© 2025 LOL皮肤网站</span>
        <span class="footer-slogan">Choose Your Own Future</span>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: 'Login',
  data() {
    return {
      admin: {
        role: 'ROLE_USER'
      },
      showTip: false
    }
  },
  methods: {
    login() {
      request.post("/admin/login", this.admin).then(res => {
        if (res.code === '0') {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          localStorage.setItem("user", JSON.stringify(res.data));
          this.$router.push("/");
        } else {
          this.$message({
            message: "登录失败：" + res.data,
            type: "error",
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #232f3e 0%, #409EFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 370px;
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 38px 32px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  animation: floatIn 0.8s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes floatIn {
  0% { transform: translateY(60px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.login-logo-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.login-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-right: 12px;
  box-shadow: 0 2px 8px #e6e6e6;
  background: #fff;
}
.login-title {
  font-size: 22px;
  font-weight: bold;
  color: #232f3e;
  letter-spacing: 1px;
}
.login-welcome {
  font-size: 18px;
  color: #409EFF;
  margin-bottom: 18px;
  font-weight: 500;
  letter-spacing: 1px;
}
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-form input, .login-form select {
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  background: #f8f8f8;
  outline: none;
  transition: border 0.3s;
}
.login-form input:focus, .login-form select:focus {
  border: 1.5px solid #409EFF;
  background: #fff;
}
.login-form select {
  color: #333;
}
.login-btn {
  width: 100%;
  background: linear-gradient(90deg, #409EFF 60%, #1BBFB4 100%);
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 17px;
  font-weight: bold;
  padding: 13px 0;
  margin-top: 18px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px #e6e6e6;
  letter-spacing: 2px;
}
.login-btn:hover {
  background: linear-gradient(90deg, #1BBFB4 60%, #409EFF 100%);
}
.login-links {
  margin-top: 18px;
  color: #409EFF;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  user-select: none;
}
.login-links span {
  cursor: pointer;
  transition: color 0.2s;
}
.login-links span:hover {
  color: #232f3e;
  text-decoration: underline;
}
.divider {
  color: #bbb;
  margin: 0 6px;
  user-select: none;
}
.login-tip {
  position: absolute;
  top: 10px;
  right: 18px;
  background: #fffbe6;
  color: #232f3e;
  border: 1px solid #ffd04b;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  box-shadow: 0 2px 8px #e6e6e6;
  z-index: 10;
  cursor: pointer;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px);}
  to { opacity: 1; transform: translateY(0);}
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.login-footer {
  margin-top: 32px;
  width: 100%;
  text-align: center;
  color: #bbb;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: 1px;
}
.footer-slogan {
  color: #409EFF;
  font-size: 13px;
  font-style: italic;
  margin-top: 2px;
}
@media (max-width: 600px) {
  .login-card {
    width: 98vw;
    min-width: 0;
    padding: 18px 6vw 18px 6vw;
  }
  .login-logo {
    width: 38px;
    height: 38px;
    margin-right: 8px;
  }
  .login-title {
    font-size: 17px;
  }
}
</style>